<template>
  <div>
    <card title="基本信息">
      <a-descriptions :size="'medium'" :align="{ label: 'right' }">
        <a-descriptions-item label="上级机构">{{ info.parentOrgName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="门店名称">{{ info.siteName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="门店坐标">
          <template v-if="info.longitudeGd && info.latitudeGd">
            {{ `${info.longitudeGd},${info.latitudeGd}` }}
            <icon-location style="color: #165dff; cursor: pointer" @click="openLocationFn" />
          </template>
          <template v-else>-</template>
        </a-descriptions-item>
        <a-descriptions-item label="城市">{{ info.cityName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="区域">{{ info.districtName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="地址">{{ info.address || '-' }}</a-descriptions-item>
        <a-descriptions-item label="门店车场">{{ info.siteCarPark || '-' }}</a-descriptions-item>
        <a-descriptions-item label="门店营业时间">
          <template v-if="info.fromTime && info.toTime">
            {{ info.fromTime + '-' + info.toTime }}
          </template>
          <template v-else>-</template>
        </a-descriptions-item>
        <a-descriptions-item label="门店状态">{{ info.statusName || '-' }}</a-descriptions-item>
      </a-descriptions>
    </card>
    <card title="联系信息">
      <template v-if="info.contactList && info.contactList.length > 0">
        <div v-for="(item, index) in info.contactList" :key="index">
          <a-descriptions size="medium" :align="{ label: 'right' }" :column="4">
            <a-descriptions-item label="联系人">{{ item.name || '-' }}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{ item.phone || '-' }}</a-descriptions-item>
            <a-descriptions-item><div></div></a-descriptions-item>
          </a-descriptions>
        </div>
      </template>
      <template v-else>
        <a-empty />
      </template>
    </card>
    <card
      title="配置车管家"
      labelTooltipContent="工单开启车管家模式后，所有的长/短租订单由车管家针对交车人、换车人、还车人派单，相关负责人接单后，进行操作"
      :showDivider="false"
    >
      <a-descriptions
        size="medium"
        :align="{ label: 'right' }"
        :column="3"
        :value-style="{ width: getWidth(info.carHouseKeepIdList) }"
        v-if="info.carHouseKeepIdList && info.carHouseKeepIdList.length"
      >
        <a-descriptions-item :label="`车管家-${index + 1}`" v-for="(item, index) in info.carHouseKeepIdList" :key="index">
          {{ item.realname || '-' }}
          <template v-if="item.staffStatusName">({{ item.staffStatusName }})</template>
        </a-descriptions-item>
      </a-descriptions>
      <a-empty v-else />
    </card>
    <!-- 坐标选择 -->
    <lnglat-picker-modal ref="lnglatPickerModalRef" readonly />
  </div>
</template>

<script setup name="MerchantStoreDetailStoreInfo">
  import { ref } from 'vue'
  const props = defineProps({
    info: Object,
  })

  const lnglatPickerModalRef = ref(null)
  const openLocationFn = () => {
    lnglatPickerModalRef.value.open(`${props.info.longitudeGd},${props.info.latitudeGd}`)
  }
  // 根据数组长度动态改变宽度
  const getWidth = (list) => {
    if (list) {
      switch (list.length) {
        case 1:
          return '87%'
        case 2:
          return '37%'
        case 3:
          return '20%'
      }
    } else {
      return 'auto'
    }
  }
</script>

<style lang="less" scoped></style>
